<template>
  <div class="problemList bg-f2">
    <div class="problem-R noControlPanel bg-f2 bg-fff">
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="harderBox">
        <el-form-item label="唯一ID：">
          <el-input v-model.trim="harderBox.imeiLike" clearable prefix-icon="el-icon-search" placeholder="唯一ID" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item label="用户：">
          <el-input v-model.trim="harderBox.zsxm" clearable prefix-icon="el-icon-search" placeholder="用户" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item label="品牌：">
          <el-input v-model.trim="harderBox.brand" clearable prefix-icon="el-icon-search" placeholder="品牌" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item label="型号：">
          <el-input v-model.trim="harderBox.model" clearable prefix-icon="el-icon-search" placeholder="品牌" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn()">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="tableList"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :default-sort="{ prop: 'CJSJ', order: 'descending' }"
        v-loading="tableLoad"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="imei" label="唯一ID"></el-table-column>
        <el-table-column prop="zsxm" label="用户"></el-table-column>
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="model" label="手机型号"></el-table-column>
        <el-table-column prop="system" label="安卓版本"></el-table-column>
        <el-table-column prop="screenHeight" label="高"></el-table-column>
        <el-table-column prop="screenWidth" label="宽"></el-table-column>
        <el-table-column prop="createDate" label="创建时间">
          <template slot-scope="scope">{{ scope.row.createDate | dateFormat }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100" align="right">
          <template slot-scope="scope">
            <div class="operations">
              <el-button type="text" class="Btn_nan" @click="bindUser(scope.row)">绑定</el-button>
              <span class="operation"></span>
              <el-button type="text" :disabled="scope.row.zsxm === null" class="Btn_nan" @click="unBindUser(scope.row)">解绑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12"></el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="绑定用户" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form :inline="true" :model="bindUserBox">
        <el-form-item>
          <el-input v-model.trim="bindUserBox.val" clearable prefix-icon="el-icon-search" placeholder="输入姓名" class="search_btn search_icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchUser()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        :data="bindUserTable"
        v-loading="bindUserLoad"
        stripe
        border
        style="width: 100%"
        @row-click="addRowClick"
      >
        <template slot="empty">{{ bindUserTableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="zsxm" label="姓名">
          <template slot-scope="scope">
            <el-radio-group v-model="templateRadio" @click.native.stop @change="getTemplateRow(scope.row)" class="lineH0">
              <el-radio :label="scope.row.id">
                <span style="display: inline-block">{{ scope.row.zsxm }}</span>
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="zh" label="登录账号"> </el-table-column>
        <el-table-column prop="lxdh" label="手机号"> </el-table-column>
        <el-table-column prop="yx" label="邮箱"> </el-table-column>
      </el-table>
      <el-row style="padding-top: 25px">
        <el-col :span="12">
          <el-pagination
            background
            @current-change="bindUser_handleCurrentChange"
            :current-page="bindUserCurrentPage"
            :page-size="bindUserPageSize"
            layout="total, prev, pager, next"
            :total="bindUserTotal"
          ></el-pagination>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table" align="right">
          <el-button class="btnSizeStyle" @click="dialogVisible = false">取 消</el-button>
          <el-button class="btnSizeStyle" :disabled="templateRadio === ''" :loading="bindBtnLoad" type="primary" @click="bindDefine">绑 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data() {
    return {
      harderBox: {
        imeiLike: '', // 唯一ID
        zsxm: '', // 用户
        brand: '', // 品牌
        model: '', // 型号
      },
      currentPage: 1,
      pageSize: 10,
      tableList: [],
      total: 0,
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      selectList: [],
      dialogVisible: false,
      bindUserTable: [], // 绑定用户
      bindUserLoad: null,
      bindUserTimer: false,
      bindUserTableMessage: '',
      bindUserBox: { val: '' },
      bindUserCurrentPage: 1,
      bindUserPageSize: 10,
      bindUserTotal: 0,
      templateRadio: '',
      selectAppId: '', // 绑定的appid
      bindBtnLoad: false,
      bindBtnTimer: null,
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableList = []
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
    bindUserLoad(newVal, oldVal) {
      this.bindUserTimer = setTimeout(() => {
        if (this.bindUserLoad) {
          this.bindUserLoad = false
          this.bindUserTable = []
          this.bindUserTableMessage = tableMessageText
        }
      }, timeLoad)
    },
    bindBtnLoad(newVal, oldVal) {
      this.bindBtnTimer = setTimeout(() => {
        if (this.bindBtnLoad) {
          this.bindBtnLoad = false
        }
      }, timeLoad)
    },
  },
  created() {
    // 获取数据
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('imeiLike', this.harderBox.imeiLike)
      params.append('zsxm', this.harderBox.zsxm)
      params.append('brand', this.harderBox.brand)
      params.append('model', this.harderBox.model)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${pinT}app/list`, params)
      this.tableLoad = false // 表格加载中样式
      switch (res.code) {
        case '0000':
          this.tableList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.tableList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    searchBtn() {
      this.currentPage = 1
      this.getList()
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.getList()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.getList()
    },
    async getUserList() {
      clearTimeout(this.bindUserTimer)
      this.bindUserLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.bindUserCurrentPage)
      params.append('N_', this.bindUserPageSize)
      params.append('TYPE', 1)
      params.append('ZSXM', this.bindUserBox.val)
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params)
      this.bindUserLoad = false // 表格加载中样式
      switch (res.code) {
        case '0000':
          this.bindUserTable = res.data.list
          this.bindUserTotal = res.data.countList
          break
        default:
          this.bindUserTable = []
          this.bindUserTotal = 0
          this.bindUserTableMessage = res.message
          break
      }
    },
    // 绑定用户
    bindUser(row) {
      this.selectAppId = row.id
      this.bindUserCurrentPage = 1
      this.bindUserPageSize = 10
      this.bindUserBox.val = ''
      this.dialogVisible = true
      this.templateRadio = ''
      this.getUserList()
    },
    // 解绑用户
    async unBindUser(row) {
      const that = this
      this.$confirm('是否确定解绑用户?', '解绑用户', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          // 确定
          that.unBindUserFun(row)
        })
        .catch(() => {})
    },
    async unBindUserFun(row) {
      const params = new URLSearchParams()
      params.append('bindingType', 1)
      params.append('ID', row.id)
      const { data: res } = await this.$http.post(`${pinT}app/updateAppUser`, params)
      switch (res.code) {
        case '0000':
          this.getList()
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 查询用户
    searchUser() {
      this.bindUserCurrentPage = 1
      this.getUserList()
    },
    handleClose() {
      this.dialogVisible = false
    },
    bindUser_handleCurrentChange(newChange) {
      this.bindUserCurrentPage = newChange
      this.getUserList()
    },
    addRowClick(row, column, event) {
      this.templateRadio = row.id
    },
    // 选择用户
    getTemplateRow(row) {
      this.templateRadio = row.id
    },
    // 绑定
    async bindDefine() {
      clearTimeout(this.bindBtnTimer)
      this.bindBtnLoad = true
      const params = new URLSearchParams()
      params.append('userId', this.templateRadio)
      params.append('ID', this.selectAppId)
      const { data: res } = await this.$http.post(`${pinT}app/updateAppUser`, params)
      this.bindBtnLoad = false
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.selectAppId = ''
          this.dialogVisible = false
          this.currentPage = 1
          this.pageSize = 10
          this.getList()
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
  },
  destroyed() {
    clearTimeout(this.tableTimer)
  },
}
</script>
<style lang="scss" scoped>
::v-deep .lineH0 {
  // .el-radio__input {
  //   line-height: 0;
  // }
  .el-radio__original {
    top: unset;
  }
}
</style>
